import { defineStore, storeToRefs } from 'pinia';
import { getAppEnvConfig } from '../hooks/useEnv';
import { MenuModeEnum } from '../enums/menuEnum';
import { ThemeEnum } from '../enums/appEnum';
import { LocaleType } from 'types/locale';
import { useLocaleStore } from './locale';

const env = getAppEnvConfig()
console.log('env_data: ', env);

type StateType ={
	collapse?: boolean,
	mode: MenuModeEnum,
	rightSettingPannel: boolean,
	theme: ThemeEnum,
	localeInfo: LocaleType
}

export const useSidebarStore = defineStore('sidebar', {
	// 开启持久化
	// persist: true,
	persist: {
		key: 'APP_SIDEBAR_SETTING',
		// 指定字段
		paths: ['mode','theme','localeInfo']
	},

	state: () => {
		return {
			collapse: true,
			mode: env.VITE_MENU_MODE,
			// 右侧侧边栏配置项
			rightSettingPannel: false,
			theme: env.VITE_SYSTEM_THEME,
			localeInfo: env.VITE_LOCALE_INFO
		};
	},
	getters: {
		isVertical: (state) => {
			return state.mode === 'vertical'
		},
	},
	actions: {
		handleCollapse() {
			this.collapse = !this.collapse;
		},
		/**
		 * 切换右侧边栏配置
		 */
		handleRightPannel() {
			this.rightSettingPannel = !this.rightSettingPannel
		},

		/**
		 * 更新sidebar所有state
		 * @param datas 
		 */
		handleSetState(datas: StateType) {
			const localeStore = useLocaleStore()
			let key:keyof StateType
			for (key in datas) {
				if (key == 'localeInfo') {
					localeStore.setLocale(datas[key])
					window.location.reload()
				}
				this[key] = datas[key]
			}
		},
	}
});
